import china from '@/utils/China.json';
import * as echarts from 'echarts'; //全局引入 ，可按需引入
import { useEffect, useRef } from 'react';
const Map = (props) => {
  const { mapData } = props;
  const seriesData = [{
      name: '',
      value: mapData,
      symbol: 'image://' + require('@/images/contact/location.png'),
      symbolSize: 28,
      symbolOffset: [0, -14],
      symbolPosition: 'top',
  }];
  const chartRef = useRef();
  const mapOption = (mapName, data) => {
    const myChart = echarts.init(chartRef.current);
    echarts.registerMap(mapName, data);
    const option = {
      tooltip: {
        show: false
      },
      geo: {
        map: 'china',
        roam: false, //不开启缩放和平移
        label: {
          normal: {
            show: false,
          },
          emphasis: {
            show: false,
          }
        },
        silent: true,
        itemStyle: {
          normal: {
            borderColor: 'rgba(235, 235, 235, 1)',
            areaColor: 'rgba(235, 235, 235, 1)',
          },
        },
      },
      series: [
        {
          type: 'scatter',
          map: 'china', // 设置使用世界地图
          coordinateSystem: 'geo',
          silent: true,
          label: {
            show: false // 显示城市名称
          },
          data: seriesData,
        }
      ]
    };
    
    myChart.setOption(option); //绘图
  };
  const loadingChina = () => {
    mapOption('china', china); //初始化-创建中国地图
  };
 
  useEffect(() => {
    loadingChina();
  }, [mapData]);
 
  return <div style={{ width: '100%', height: '100%' }} ref={chartRef} />;
};
export default Map;